<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName(
                        '/all-resource-data/index'
                    )"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>{{
                    $route.query.title
                }}</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="content-box">
            <div class="retrieval-box">
                <div class="content">
                    <div class="search-left">
                        <div class="search-group">
                            <div
                                v-for="(item, index) in itemList"
                                :key="index"
                                class="search-wrap"
                            >
                                <span
                                    v-if="
                                        ![
                                            'create_time',
                                            'city_code',
                                            'collector'
                                        ].includes(item.field)
                                    "
                                    :class="{ active: item.active === true }"
                                    class="icon-btn"
                                    @click="selectedItem(item)"
                                ></span>
                                <i
                                    v-if="
                                        ![
                                            'create_time',
                                            'city_code',
                                            'collector'
                                        ].includes(item.field)
                                    "
                                    class="el-icon-error del-icon"
                                    @click="deleteItem(item, index)"
                                ></i>
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="item.fieldName"
                                    placement="top"
                                >
                                    <span class="keyword">{{
                                        item.fieldName
                                    }}</span>
                                </el-tooltip>
                                <check-conditions
                                    v-if="
                                        !['3', '6', '7'].includes(
                                            item.valueKindId
                                        )
                                    "
                                    v-model="item.conditionValue"
                                ></check-conditions>

                                <div
                                    class="search-item"
                                    :class="{
                                        hasClass: ['3', '6', '7'].includes(
                                            item.valueKindId
                                        )
                                    }"
                                >
                                    <el-cascader
                                        v-if="
                                            item.valueKindId === '7' &&
                                                item.field === 'city_code'
                                        "
                                        v-model="cityCodeVal"
                                        :options="options"
                                        :props="props"
                                        placeholder="所在区镇村"
                                        clearable
                                        @visible-change="visibleChange"
                                        @change="
                                            cascaderChange(cityCodeVal, item)
                                        "
                                        :key="key"
                                        style="width:100%"
                                    >
                                    </el-cascader>
                                    <el-select
                                        v-if="
                                            item.valueKindId === '6' ||
                                                (item.valueKindId === '7' &&
                                                    item.field !== 'city_code')
                                        "
                                        :multiple="item.multi"
                                        :collapse-tags="item.multi"
                                        clearable
                                        v-model="item.keyword1"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in item.selects"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name"
                                        >
                                        </el-option>
                                    </el-select>
                                    <el-date-picker
                                        v-if="item.valueKindId === '3'"
                                        v-model="item.keyword1"
                                        type="daterange"
                                        range-separator="-"
                                        start-placeholder="例:1991-01-01"
                                        end-placeholder="1991-12-31"
                                        value-format="yyyy-MM-dd"
                                    >
                                    </el-date-picker>
                                    <el-input
                                        class="input"
                                        v-if="
                                            !['3', '6', '7'].includes(
                                                item.valueKindId
                                            )
                                        "
                                        v-model="item.keyword1"
                                        placeholder="请输入"
                                    >
                                    </el-input>
                                    <el-input
                                        class="input"
                                        v-if="
                                            item.conditionValue === '4' &&
                                                item.valueKindId !== '3'
                                        "
                                        v-model="item.keyword2"
                                        placeholder="请输入"
                                    >
                                    </el-input>
                                </div>
                            </div>
                        </div>
                        <div class="search-left-footer">
                            <div class="handle">
                                <el-button icon="el-icon-plus" @click="maskShow"
                                    >添加检索条件</el-button
                                >
                                <el-button
                                    type="primary"
                                    @click="handleStartSearch"
                                    >检索</el-button
                                >
                                <span @click="handleSave">保存为常用</span>
                            </div>
                            <div class="save-list">
                                <p>常用检索</p>
                                <ul>
                                    <li
                                        v-for="(item,
                                        index) in conditionList.slice(0, 3)"
                                        :key="index"
                                        @click.prevent="handlePush(item)"
                                    >
                                        <span :title="item.name">{{
                                            item.name
                                        }}</span>
                                        <i
                                            @click.stop="handleRemoveItem(item)"
                                            class="el-icon-delete-solid"
                                        ></i>
                                    </li>
                                    <el-dropdown
                                        placement="bottom"
                                        v-if="conditionList.length > 3"
                                    >
                                        <span class="el-dropdown-link"
                                            ><i
                                                class="el-icon-more el-icon--right"
                                            ></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item
                                                v-for="(item,
                                                index) in conditionList.slice(
                                                    3
                                                )"
                                                :key="index"
                                                @click.native.prevent="
                                                    handlePush(item)
                                                "
                                                ><span :title="item.name">{{
                                                    item.name
                                                }}</span>
                                                <i
                                                    @click.stop="
                                                        handleRemoveItem(item)
                                                    "
                                                    class="el-icon-delete-solid"
                                                ></i>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="search-right">
                        <div>
                            <p>{{ this.$route.query.typeName }}增长图</p>
                            <el-select
                                v-model="dataTime"
                                placeholder="请选择"
                                @change="getLineChart"
                            >
                                <el-option
                                    value="1"
                                    label="最近一周"
                                ></el-option>
                                <el-option
                                    value="2"
                                    label="最近一个月"
                                ></el-option>
                            </el-select>
                        </div>
                        <div
                            ref="echars-category"
                            class="echars-category"
                        ></div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="content" v-if="tableData.length > 0">
                    <div class="download" @click="dialogExport = true">
                        <i class="el-icon-download"></i>
                        <span>导出当前搜索结果</span>
                    </div>
                    <el-table
                        :data="tableData"
                        ref="multipleTable"
                        class="pbb__table"
                        header-cell-class-name="pbb__table-thead"
                        cell-class-name="pbb__table-thead-cell"
                        row-class-name="pbb__table-thead-row"
                        style="width: 100%"
                        row-key="id"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            align="center"
                            type="selection"
                            :reserve-selection="true"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            label="序号"
                            align="center"
                            type="index"
                            :index="indexMethod"
                            width="80"
                        >
                        </el-table-column>
                        <el-table-column
                            label="采集时间"
                            prop="create_time"
                            width="120"
                        ></el-table-column>
                        <el-table-column
                            label="采集区域"
                            prop="city_code"
                            width="120"
                        ></el-table-column>
                        <el-table-column
                            label="采集人"
                            prop="collector"
                            width="120"
                        ></el-table-column>
                        <el-table-column
                            v-for="item in tableColumn"
                            :key="item.field"
                            :prop="item.field"
                            :label="item.fieldName"
                            :show-overflow-tooltip="
                                [3, 4, 6, 7, 12].includes(item.valueKindId)
                            "
                            :min-width="
                                [3, 11].includes(item.valueKindId)
                                    ? '200px'
                                    : [5, 8].includes(item.valueKindId)
                                    ? '140px'
                                    : item.fieldName.length * 16 + 20 > 140
                                    ? item.fieldName.length * 16 + 20 + 'px'
                                    : '140px'
                            "
                        >
                            <template slot-scope="scope">
                                <div v-if="item.valueKindId === '5'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-button
                                            type="primary"
                                            @click="
                                                previewImg(
                                                    scope.row[item.field].split(
                                                        ','
                                                    )
                                                )
                                            "
                                            >查看图片</el-button
                                        >
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === '8'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-button
                                            type="primary"
                                            @click="
                                                videoPlay(scope.row[item.field])
                                            "
                                            >点击播放</el-button
                                        >
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === '9'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-button
                                            type="text"
                                            @click="
                                                previewVideo(
                                                    scope.row[item.field],
                                                    'record'
                                                )
                                            "
                                            >播放</el-button
                                        >
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === '10'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-link
                                            class="table-file"
                                            v-for="(it, idx) in scope.row[
                                                item.field
                                            ]"
                                            :key="idx"
                                            type="primary"
                                            :href="$staticUrl + '/' + it"
                                            target="_blank"
                                        >
                                            文件{{ idx + 1 }}
                                        </el-link>
                                    </div>
                                </div>
                                <span
                                    v-else
                                    :title="scope.row[item.field]"
                                    class="other-span"
                                    >{{ scope.row[item.field] }}</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    size="small"
                                    @click="goToDetails(scope.row)"
                                    >详情</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <ask-empty-text v-else style="min-height: 400px;">
                </ask-empty-text>
            </div>
        </div>
        <template v-slot:footer v-if="tableData.length > 0">
            <div class="page-base-footer__right">
                <div class="num-box">
                    已选<span>{{ multipleSelection.length }}</span
                    >条
                </div>
                <el-divider direction="vertical"></el-divider>
                <el-button
                    :disabled="multipleSelection.length === 0"
                    type="primary"
                    @click="handleExprotAnnex"
                    >导出附件</el-button
                >
            </div>
            <pagination
                :total="total"
                :page.sync="currentPage"
                :limit.sync="pageSize"
                @pagination="getTable"
            />
        </template>
        <el-dialog
            title="自定义检索条件与展示"
            :visible.sync="dialogVisible"
            width="50%"
            center
            :before-close="handleClose"
            class="tree-dialog"
        >
            <div class="tree-box">
                <div class="tree-center">
                    <div class="tree-center-top">
                        <p>请选择你需要检索的选项</p>
                        <el-tree
                            :data="childDataFilter"
                            show-checkbox
                            node-key="id"
                            ref="termTree"
                            :default-checked-keys="Keys"
                            :props="childProps"
                            @check="handleCheckChange"
                        >
                        </el-tree>
                    </div>
                    <div class="tree-center-bottom">
                        <p>请选择你需要展示的选项</p>
                        <el-tree
                            :data="newChildData"
                            show-checkbox
                            node-key="id"
                            ref="titleTree"
                            :default-checked-keys="checkKeys"
                            :default-expanded-keys="expandedKeys"
                            :props="childProps"
                            @check="CheckChange"
                        >
                        </el-tree>
                    </div>
                </div>
                <div class="tree-right">
                    <div class="tree-right-top">
                        <p>已选择条件(最多6条)</p>
                        <el-checkbox-group
                            v-model="searchNameList"
                            @change="handleValChange"
                        >
                            <el-checkbox
                                v-for="(item, index) in searchList"
                                :key="index"
                                :label="item"
                                >{{ item.fieldName }}</el-checkbox
                            >
                        </el-checkbox-group>
                    </div>
                    <div class="tree-right-bottom">
                        <p>已选择检索结果(最多30个)</p>
                        <el-checkbox-group
                            v-model="tableTitleNameList"
                            @change="handleChange"
                        >
                            <el-checkbox
                                v-for="(item, index) in tableTitleList"
                                :key="index"
                                :label="item"
                                >{{ item.fieldName }}</el-checkbox
                            >
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSetRule"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="导出"
            class="export-dialog"
            :visible.sync="dialogExport"
            width="30%"
        >
            <el-form label-position="top">
                <el-form-item
                    label="选择导出序号"
                    required
                    class="serial-number"
                >
                    <div class="group">
                        <el-input
                            v-model.number="startNumber"
                            placeholder="请输入开始序号"
                            autocomplete="off"
                            size="small"
                        ></el-input>
                        <span>至</span>
                        <el-input
                            v-model.number="endNumber"
                            placeholder="请输入结束序号"
                            autocomplete="off"
                            size="small"
                        ></el-input>
                    </div>
                    <font class="tips"
                        >最多支持导出5000条(包含有图片选项时最多支持100条)</font
                    >
                </el-form-item>
                <el-form-item label="选择导出列">
                    <el-select
                        v-model="exportColumnList"
                        multiple=""
                        placeholder="请选择(默认全部)"
                        @change="changeSelect"
                        @remove-tag="removeTag"
                    >
                        <el-option
                            label="全选"
                            value="ALL"
                            @click.native="selectAll"
                            v-if="tableColumn.length"
                        >
                        </el-option>
                        <el-option
                            v-for="item in tableColumn"
                            :key="item.field"
                            :label="item.fieldName"
                            :value="item.field"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handeleColse">取 消</el-button>
                <el-button type="primary" @click="handleExport()"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="导出附件"
            :visible.sync="enclosureDialog"
            width="30%"
            class="annex-mask"
            @close="closeAnnex"
            @open="openAnnex"
        >
            <div v-if="exportAnnexList.length > 0">
                <p>目前仅支持导出前1000条数据</p>
                <div>
                    <span>选择导出附件:</span>
                    <el-checkbox-group v-model="exportCheckList">
                        <el-checkbox
                            v-for="item in exportAnnexList"
                            :key="item.id"
                            :label="item.field"
                            >{{ item.fieldName }}</el-checkbox
                        >
                    </el-checkbox-group>
                </div>
                <div>
                    <span>附件名称:</span>
                    <el-select
                        v-model="annexName"
                        multiple
                        :multiple-limit="3"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="(item, index) in newTableColumn"
                            :key="index"
                            :value="item.field"
                            :label="item.fieldName"
                        >
                        </el-option>
                    </el-select>
                    <p>选择某一列数据内容为导出的附件命名(最多可选择三个)</p>
                </div>
            </div>
            <p v-else>选择的列表项暂无附件</p>
            <span
                slot="footer"
                v-if="exportAnnexList.length > 0"
                class="dialog-footer"
            >
                <el-button @click="closeExprot">取 消</el-button>
                <el-button
                    :disabled="exportAnnexList.length === 0"
                    type="primary"
                    @click="exportAnnex"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import CheckConditions from "@/views/data-retrieval/src/components/check-conditions/index.vue";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@core/public/preview-video-audio/index";
import { State } from "vuex-class";
import { downLoadBase64File } from "@/utils";
import * as echarts from "echarts";
@Component({
    name: "ResourceListNotAlive",
    components: { CheckConditions }
})
export default class ResourceList extends Vue {
    @State(state => state.authArea) authArea: any;
    // 已选择检索条件的数组
    itemList: any[] = [];
    dataTime = "1";
    // 已存在的检索条件
    conditionList: any[] = [];
    // 检索条件的总数组
    retrieveData: any[] = [];
    // 列表头以及检索条件的数组
    childData: any[] = [];
    defaultProps = {
        children: "list",
        label: "name"
    };

    childProps = {
        children: "labelList",
        label: "fieldName"
    };

    // 表格的数据
    tableData: any[] = [];
    // 表格的动态表头
    tableColumn: any[] = [];
    // 选择导出附件的项
    multipleSelection: any[] = [];

    // 用来存储已经选择的值
    changeList: any[] = [];
    // 用来表示表头默认选择当前数组的前十项
    newList: any[] = [];
    // 已选择的检索条件数组
    searchList: any[] = [];
    // 已选择检索条件复选框组件绑定的值
    searchNameList: any[] = [];
    // 已选择表头展示字段复选框组件绑定的值
    tableTitleNameList: any[] = [];
    tableTitleList: any[] = [];
    // 选择的检索条件用于向后端交换数据
    searchConditionVoList: any[] = [];
    // 检索条件弹窗的显示与隐藏
    dialogVisible = false;
    // 导出附件的弹窗
    enclosureDialog = false;
    // 当前二级分类的typeId  用于查询数据
    // 采集区域
    options: any[] = [];
    cityCodeVal = "";
    props = {
        checkStrictly: true,
        value: "code",
        label: "name",
        lazy: true,
        lazyLoad: async(node: any, resolve: any) => {
            const res: any = await this.getOptions(node.value);
            resolve(res);
        }
    };

    beatList: any[] = [];
    queryCurrentFiled = "";
    typeId = "";
    // 分页器的各项数据
    pageSize = 10;
    currentPage = 1;
    total = 0;
    // 导出表头的弹窗
    dialogExport = false;
    downType = 1;
    startNumber = "";
    endNumber = "";
    exportColumnList: any[] = [];
    Keys: any[] = [];
    exportAnnexList: any[] = [];
    exportCheckList: any[] = [];
    annexNameList: any[] = [];
    annexName = [];
    key = 0;

    // 检索条件的过滤 isSearchShow=1在检索条件里就不显示
    get childDataFilter() {
        let list: any[] = [];
        if (this.childData) {
            const newList: any[] = JSON.parse(JSON.stringify(this.childData));
            list = newList.filter((item: any) => {
                return (item.labelList = item.labelList.filter((i: any) => {
                    return i.isSearchShow === 0;
                }));
            });
            list = list.filter((item: any) => {
                if (item.labelList) {
                    return item.labelList.length > 0;
                }
            });
            return list;
        }
    }

    get newChildData() {
        return JSON.parse(JSON.stringify(this.childData));
    }

    // 列表字段默认选择前十个
    get checkKeys() {
        const list: any[] = [];
        const nameList: any[] = [];
        this.newList.forEach((item: any) => {
            list.push(item.id);
        });
        this.newChildData.forEach((item: any) => {
            item.labelList.forEach((subItem: any) => {
                this.newList.forEach((sub: any) => {
                    if (subItem.id === sub.id) {
                        nameList.push(subItem);
                    }
                });
            });
        });
        this.tableTitleNameList = nameList;
        this.tableTitleList = nameList;
        return list;
    }

    // 导出字段树 默认展开第一个
    get expandedKeys() {
        const list: any[] = [];
        if (this.newChildData.length > 0) {
            list.push(this.newChildData[0].id);
        }
        return list;
    }

    get newTableColumn() {
        const list: any[] = this.tableColumn.filter(
            (item: any) =>
                item.valueKindId !== "2" &&
                item.valueKindId !== "4" &&
                item.valueKindId !== "5" &&
                item.valueKindId !== "8" &&
                item.valueKindId !== "9" &&
                item.valueKindId !== "10"
        );
        return list;
    }

    // 今天的日期
    get getDay() {
        const y = new Date().getFullYear();
        const m = new Date().getMonth() + 1;
        const d = new Date().getDate();
        const formatwdate = y + "-" + m + "-" + d;
        return formatwdate;
    }

    // 获取上一周
    get getDate() {
        const oneweekdate = new Date(Number(new Date()) - 7 * 24 * 3600 * 1000);
        const y = oneweekdate.getFullYear();
        const m = oneweekdate.getMonth() + 1;
        const d = oneweekdate.getDate();
        const formatwdate = y + "-" + m + "-" + d;
        return formatwdate;
    }

    // 获取上一个月
    get getMonth() {
        const y = new Date().getFullYear();
        const m = new Date().getMonth();
        const d = new Date().getDate();
        const formatwdate = y + "-" + m + "-" + d;
        return formatwdate;
    }

    // 监听已选择的检索条件长度
    @Watch("searchList")
    changSearchList(val: any) {
        if (this.childDataFilter) {
            this.childDataFilter.forEach((item: any) => {
                item.labelList.forEach((subItem: any) => {
                    if (val.length > 5) {
                        subItem.disabled = true;
                    } else {
                        subItem.disabled = false;
                    }
                });
            });
        }
    }

    // 监听以选择表头长度
    @Watch("tableTitleList")
    changLen(val: any) {
        if (this.newChildData) {
            this.newChildData.forEach((item: any) => {
                item.labelList.forEach((subItem: any) => {
                    if (val.length > 29) {
                        subItem.disabled = true;
                    } else {
                        subItem.disabled = false;
                    }
                });
            });
        }
    }

    created() {
        this.queryCurrentFiled = this.$route.query.field as string;
        this.getAllData();
        this.getSearchConditions();
    }

    mounted() {
        this.getLineChart();
    }

    visibleChange(show: any) {
        if (!show && !this.cityCodeVal.length) {
            this.key++;
        }
    }

    cascaderChange(val: any, item: any) {
        if (val) {
            item.keyword1 = val[val.length - 1];
        }
        if (!this.cityCodeVal.length) {
            this.key++;
            item.keyword1 = "";
        }
    }

    async getOptions(code?: any) {
        let list: any[] = [];
        const res = await this.$server["userList/getArea"]({
            data: {
                code: code || ""
            },
            loader: false
        });
        if (res.data.code === 200) {
            list = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
        return list;
    }

    // 当分页器的数据发生变化时
    getTable(val: any) {
        const dalist = {
            currentPage: val.page,
            pageSize: val.limit,
            searchConditionVoList: this.searchConditionVoList,
            typeId: this.$route.query.typeId
        };
        this.getTableData(dalist);
    }

    // 获取检索树形数据
    // 获取村的人员
    // 获取采集区域
    async getAllData() {
        const res = await this.$server["retrieval/getTree"]({ data: {} });
        // 获取检索树形数据
        if (res.data.code === 200) {
            this.retrieveData = res.data.data;
            this.retrieveData.forEach((item: any) => {
                if (item.children) {
                    item.children.forEach((subItem: any) => {
                        if (subItem.id === this.$route.query.typeId) {
                            this.childData = subItem.children;
                        }
                    });
                }
            });
            this.childData = this.childData.map((item: any) => {
                return { ...item, fieldName: item.name };
            });
            this.childData = this.childData.filter((item: any) => {
                if (item.labelList) {
                    return item.labelList.length > 0;
                }
            });
            this.newList = this.childData[0].labelList.slice(0, 10);
            this.tableColumn = this.childData[0].labelList.slice(0, 10);
        }

        this.itemList = [
            {
                field: "create_time",
                fieldName: "采集时间",
                conditionValue: "4",
                keyword1: "",
                keyword2: "",
                valueKindId: "3",
                active: true
            },
            {
                field: "city_code",
                fieldName: "采集区域",
                conditionValue: "5",
                keyword1: "",
                keyword2: "",
                valueKindId: "7",
                multi: false,
                active: true
            }
        ];
        this.handleStartSearch();
    }

    async getLineChart() {
        const res = await this.$server["allResourceData/dataGrowthLineChar"]({
            data: {
                start: this.dataTime === "1" ? this.getDate : this.getMonth,
                end: this.getDay,
                field: this.$route.query.field
            },
            loader: false
        });
        if (res.data.code === 200) {
            this.setEcharts(res.data.data);
        }
    }

    // 基于准备好的dom，初始化echarts的实例
    setEcharts(data: any) {
        const category: any = this.$refs["echars-category"];
        if (category) {
            const chart = echarts.init(category);
            chart.setOption({
                grid: {
                    x: 50,
                    y: 20,
                    x2: 30,
                    y2: 20,
                    borderWidth: 1
                },
                tooltip: {
                    trigger: "axis",
                    formatter: "{b} : {c}"
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: Object.keys(data),
                    axisLabel: {
                        formatter: (params: any) => {
                            return params.substring(5);
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    min: 0,
                    minInterval: 1,
                    axisLabel: {
                        formatter: (params: any) => {
                            if (params.toString().length >= 6) {
                                return `${params / 10000}(万)`;
                            } else {
                                return params;
                            }
                        }
                    }
                },
                series: [
                    {
                        data: Object.values(data),
                        type: "line"
                    }
                ]
            });
            window.addEventListener("resize", function() {
                chart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
    }

    // 获取表格数据
    async getTableData(data: any) {
        const res = await this.$server["retrieval/queryData"]({
            data: data
        });
        if (res.data.code === 200) {
            if (res.data.data) {
                this.tableData = res.data.data.records;
                this.total = res.data.data.total;
            } else {
                this.tableData = [];
                this.total = 0;
            }
        } else {
            this.tableData = [];
            this.total = 0;
        }
    }

    // 打开检索条件框
    maskShow() {
        const titIdList: any[] = [];
        const titNameList: any[] = [];
        const list: any[] = [];
        const arrlist: any[] = [];
        this.dialogVisible = true;
        // 通过常用检索条件里面存储的表头去设置弹窗里面的表头
        if (this.tableColumn.length > 0) {
            this.tableColumn.forEach((item: any) => {
                titIdList.push(item.id);
                titNameList.push(item);
            });
            this.$nextTick(() => {
                this.tableTitleNameList = titNameList;
                this.tableTitleList = titNameList;
                (this.$refs.titleTree as any).setCheckedKeys(titIdList);
            });
        } else {
            this.newList = this.childData[0].labelList.slice(0, 10);
        }
        //  设置已经选择了的检索条件
        this.itemList.slice(2).forEach((i: any) => {
            list.push(i.id);
            arrlist.push(i);
        });
        this.searchList = arrlist;
        this.searchNameList = arrlist;
        this.$nextTick(() => {
            this.Keys = list;
            (this.$refs.termTree as any).setCheckedKeys(list);
        });
    }

    // 关闭检索条件弹窗
    handleClose(done: any) {
        done();
    }

    selectedItem(item: any) {
        item.active = !item.active;
    }

    // 删除检索条件
    deleteItem(item: any, index: any) {
        this.itemList.splice(index, 1);
        const list: any[] = [];
        const arrlist: any[] = [];
        this.itemList.slice(2).forEach((item: any) => {
            list.push(item.id);
            arrlist.push(item);
        });
        this.searchList = arrlist;
        this.searchNameList = arrlist;
        (this.$refs.termTree as any).setCheckedKeys(list);
    }

    // 动态计算表格的索引值
    indexMethod(index: any) {
        return index + 1 + (this.currentPage - 1) * this.pageSize;
    }

    // 检索条件复选框被点击时触发
    handleCheckChange(data: any, node: any) {
        const checkedNodesList = node.checkedNodes.filter((item: any) => {
            return !item.parentId;
        });
        this.searchList = checkedNodesList;
        this.searchNameList = checkedNodesList;
    }

    // 列表字段复选框点击时触发
    CheckChange(data: any, node: any) {
        const checkedNodesList = node.checkedNodes.filter((item: any) => {
            return !item.parentId;
        });
        this.tableTitleList = checkedNodesList;
        this.tableTitleNameList = checkedNodesList;
    }

    // 已选择的检索条件复选框点击时触发
    handleValChange(val: any) {
        const list: any[] = [];
        const arrlist: any[] = [];
        val.forEach((item: any) => {
            list.push(item.id);
            arrlist.push(item);
        });
        this.searchList = arrlist;

        (this.$refs.termTree as any).setCheckedKeys(list);
    }

    // 已选择的表头字段复选框点击时触发
    handleChange(val: any) {
        const list: any[] = [];
        const arrlist: any[] = [];
        val.forEach((item: any) => {
            list.push(item.id);
            arrlist.push(item);
        });
        this.tableTitleList = arrlist;
        (this.$refs.titleTree as any).setCheckedKeys(list);
    }

    // 设置检索条件以及选择表格表头
    handleSetRule() {
        const newList = this.searchNameList.map((item: any) => {
            if (["6", "7"].includes(item.valueKindId)) {
                return {
                    ...item,
                    conditionValue: "3",
                    keyword1: "",
                    keyword2: "",
                    active: true
                };
            } else if (item.valueKindId === "3") {
                return {
                    ...item,
                    conditionValue: "4",
                    keyword1: "",
                    keyword2: "",
                    active: true
                };
            } else {
                return {
                    ...item,
                    conditionValue: "5",
                    keyword1: "",
                    keyword2: "",
                    active: true
                };
            }
        });
        // 保留采集时和采集区域的值this.itemList.slice(2)
        this.itemList.slice(2).forEach((item: any) => {
            newList.forEach((subItem: any) => {
                if (subItem.id === item.id) {
                    subItem.conditionValue = item.conditionValue;
                    subItem.keyword1 = item.keyword1;
                    subItem.keyword2 = item.keyword2;
                    subItem.active = item.active;
                }
            });
        });
        this.itemList = this.itemList.slice(0, 2).concat(newList);
        this.tableColumn = this.tableTitleNameList;
        this.dialogVisible = false;
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
    }

    // 开始检索
    handleStartSearch() {
        let val = "";
        this.itemList = this.itemList.filter((item: any) => {
            return item.active;
        });
        this.searchConditionVoList = this.itemList.map((item: any) => {
            if (item.keyword1 instanceof Array) {
                val = item.keyword1.toString().replace(/,/g, "###");
            } else {
                if (item.keyword2) {
                    val = `${item.keyword1}###${item.keyword2}`;
                } else {
                    val = `${item.keyword1}`;
                }
            }
            return {
                field: item.field,
                term: item.conditionValue,
                value: val
            };
        });
        this.currentPage = 1;
        this.pageSize = 10;
        const datalist = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchConditionVoList: this.searchConditionVoList,
            typeId: this.$route.query.typeId
        };
        this.getTableData(datalist);
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
    }

    // 选择导出的数据
    handleSelectionChange(val: any) {
        this.multipleSelection = val;
    }

    // 打开导出附件弹窗
    handleExprotAnnex() {
        if (this.multipleSelection.length > 0) {
            this.enclosureDialog = true;
            this.tableColumn.map((item: any) => {
                if (["5", "8", "9", "10"].includes(item.valueKindId)) {
                    this.exportAnnexList.push(item);
                }
            });
        } else {
            return this.$message.error("请选择需要导出的附件的数据");
        }
    }

    // 关闭导出附件弹窗
    closeExprot() {
        this.enclosureDialog = false;
    }

    closeAnnex() {
        this.exportAnnexList = [];
        this.exportCheckList = [];
        this.annexName = [];
        this.$store.dispatch("changeText", "");
    }

    openAnnex() {
        this.$store.dispatch("changeText", "附件正在下载中...");
    }

    async exportAnnex() {
        const dataIds: any[] = this.multipleSelection.map((item: any) => {
            return item.id;
        });
        if (this.exportCheckList.length === 0) {
            return this.$message.error("请选择需要导出的附件");
        }
        if (this.annexName.length === 0) {
            return this.$message.error("请给导出的附件命名");
        }
        const res = await this.$server["retrieval/fileCompressExport"]({
            data: {
                dataIds,
                expColumnList: this.exportCheckList,
                folderNameColumns: this.annexName,
                field: this.queryCurrentFiled
            },
            responseType: "blob"
        });
        this.enclosureDialog = false;
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute(
            "download",
            `${this.$route.query.title}检索结果附件.zip`
        );
        document.body.appendChild(link);
        link.click();
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
        document.body.removeChild(link);
        this.$message.success("下载成功");
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => {
            if (/^http/g.test(item)) {
                return item;
            } else {
                return this.$staticUrl + "/" + item;
            }
        });
        dialogPreviewImg({ title: "预览图片", current: list });
    }

    videoPlay(url: any) {
        dialogPreviewVideoAudio({
            sourceUrl: /^http/g.test(url) ? url : this.$staticUrl + "/" + url
        });
    }

    // 视频预览
    previewVideo(file: any) {
        dialogPreviewVideoAudio({
            sourceUrl: /^http/g.test(file[0])
                ? file[0]
                : this.$staticUrl + "/" + file[0]
        });
    }

    // 去详情页面
    goToDetails(item: any) {
        this.$router.push({
            name: "DataRetrievalDetails",
            query: {
                currentId: this.$route.query.typeId,
                currentFiled: this.queryCurrentFiled,
                id: item.id,
                title: this.$route.query.typeName
            }
        });
    }

    // 新增常用检索条件
    handleSave() {
        let val = "";
        const list: any[] = this.itemList.filter((item: any) => {
            return (item = item.active);
        });
        const searchList: any[] = list.map((item: any) => {
            if (item.keyword1 instanceof Array) {
                val = item.keyword1.toString().replace(/,/g, "###");
            } else {
                if (item.keyword2) {
                    val = `${item.keyword1}###${item.keyword2}`;
                } else {
                    val = `${item.keyword1}`;
                }
            }
            if (item.selects) {
                if (item.multi) {
                    return {
                        fieldName: item.fieldName,
                        field: item.field,
                        term: item.conditionValue,
                        value: val,
                        valueKind: item.valueKindId,
                        selects: JSON.stringify(item.selects),
                        multi: item.multi,
                        id: item.id ? item.id : ""
                    };
                } else {
                    return {
                        fieldName: item.fieldName,
                        field: item.field,
                        term: item.conditionValue,
                        value: val,
                        valueKind: item.valueKindId,
                        selects: JSON.stringify(item.selects),
                        id: item.id ? item.id : "",
                        firstTypeId: item.firstTypeId
                    };
                }
            } else {
                return {
                    fieldName: item.fieldName,
                    field: item.field,
                    term: item.conditionValue,
                    value: val,
                    valueKind: item.valueKindId,
                    id: item.id ? item.id : "",
                    firstTypeId: item.firstTypeId
                };
            }
        });

        this.$prompt("请输入常用检索条件名称", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"),
            inputErrorMessage: "只能输入中英文或者数字"
        })
            .then(async(value: any) => {
                const res = await this.$server["retrieval/newSaveCondition"]({
                    data: {
                        name: value.value,
                        searchConditions: searchList,
                        showColumnText: JSON.stringify(this.tableColumn),
                        typeNameConcat: this.$route.query.title,
                        typeId: this.$route.query.typeId
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("保存成功");
                    this.getSearchConditions();
                } else {
                    this.$message.error(res.data.message);
                }
            })
            .catch(() => {
                this.$message({ type: "info", message: "取消输入" });
            });
    }

    // 获取检索条件
    async getSearchConditions() {
        const res = await this.$server["retrieval/getCondition"]({
            data: {
                typeId: this.$route.query.typeId
            }
        });
        if (res.data.code === 200) {
            this.conditionList = res.data.data;
        }
    }

    // 删除检索条件
    async handleRemoveItem(item: any) {
        const res = await this.$server["retrieval/DeleteCondition"]({
            data: {
                id: item.id
            }
        });
        if (res.data.code === 200) {
            this.$message.success("删除成功");
            this.getSearchConditions();
        }
    }

    // 通过已存在的常用检索设置检索条件和表头 回显
    handlePush(item: any) {
        this.tableColumn = JSON.parse(item.showColumnText);
        this.tableTitleList = this.tableColumn;
        this.tableTitleNameList = this.tableColumn;
        this.$nextTick(() => {
            if (this.multipleSelection.length > 0) {
                this.multipleSelection = [];
                (this.$refs.multipleTable as any).clearSelection();
            }
        });
        this.itemList = item.conditionList.map((subItem: any) => {
            if (subItem.value.indexOf("###") > -1) {
                if (subItem.valueKind === 7) {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value.replace(/###/g, ",").split(","),
                        keyword2: "",
                        valueKindId: subItem.valueKind.toString(),
                        multi: true,
                        selects: JSON.parse(subItem.selects),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                } else if (subItem.valueKind === 3) {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value.replace(/###/g, ",").split(","),
                        valueKindId: subItem.valueKind.toString(),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                } else {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value.match(/(\S*)###/)[1],
                        keyword2: subItem.value.match(/###(\S*)/)[1],
                        valueKindId: subItem.valueKind.toString(),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                }
            } else {
                if (subItem.valueKind === 7) {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: "",
                        keyword2: "",
                        valueKindId: subItem.valueKind.toString(),
                        multi: true,
                        selects: JSON.parse(subItem.selects),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                } else {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value,
                        keyword2: "",
                        valueKindId: subItem.valueKind.toString(),
                        selects: JSON.parse(subItem.selects),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                }
            }
        });
        this.handleStartSearch();
    }

    // 全选
    selectAll() {
        if (this.exportColumnList.length < this.tableColumn.length) {
            this.exportColumnList = [];
            this.tableColumn.map(item => {
                this.exportColumnList.push(item.field);
            });
            this.exportColumnList.unshift("ALL");
        } else {
            // 取消全选
            this.exportColumnList = [];
        }
    }

    changeSelect(val: any) {
        if (!val.includes("ALL") && val.length === this.tableColumn.length) {
            this.exportColumnList.unshift("ALL");
        } else if (
            val.includes("ALL") &&
            val.length - 1 < this.tableColumn.length
        ) {
            this.exportColumnList = this.exportColumnList.filter(item => {
                return item !== "ALL";
            });
        }
    }

    removeTag(val: any) {
        if (val === "ALL") {
            this.exportColumnList = [];
        }
    }

    // 导出动态表格
    async handleExport() {
        const newList: any[] = [];
        const reg = new RegExp(/^([1-9]\d*|[0]{1,1})$/);
        if (this.exportColumnList.length) {
            this.tableColumn.forEach((item: any) => {
                this.exportColumnList.forEach((subItem: any) => {
                    if (item.field === subItem) {
                        newList.push({
                            column: item.field,
                            columnName: item.fieldName,
                            valueKindId: item.valueKindId
                        });
                    }
                });
            });
        } else {
            this.tableColumn.forEach((item: any) => {
                newList.push({
                    column: item.field,
                    columnName: item.fieldName,
                    valueKindId: item.valueKindId
                });
            });
        }
        const valueKindIdList: any[] = newList.filter(
            (item: any) => item.valueKindId === "5"
        );
        if (this.startNumber === "") {
            return this.$message.error("请输入开始序号");
        } else {
            if (Number(this.startNumber) === 0) {
                return this.$message.error("开始序号不能为0");
            }
            if (!reg.test(this.startNumber)) {
                return this.$message.error("开始序号须为正整数");
            }
        }
        if (this.endNumber === "") {
            return this.$message.error("请输入结束序号");
        } else {
            if (Number(this.endNumber) === 0) {
                return this.$message.error("结束序号不能为0");
            }
            if (!reg.test(this.endNumber)) {
                return this.$message.error("开始序号须为正整数");
            }
        }
        if (reg.test(this.startNumber) && reg.test(this.endNumber)) {
            const num = Number(this.endNumber) - Number(this.startNumber);
            if (valueKindIdList.length && num > 99) {
                return this.$message.error(
                    "当前选择的导出列中包含有图片选项，最多只能导出100条"
                );
            }
            if (!valueKindIdList.length && num > 4999) {
                return this.$message.error(
                    "一次最多只能导出5000条数据，请您分批次导出"
                );
            }
        }
        const res = await this.$server["retrieval/newExport"]({
            data: {
                expColumnList: newList,
                searchConditionVoList: this.searchConditionVoList,
                typeId: this.$route.query.typeId,
                currentPage: this.startNumber,
                pageSize: this.endNumber
            },
            responseType: "blob"
        });

        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute(
            "download",
            `${this.$route.query.title}检索结果.xlsx`
        );
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.handeleColse();
    }

    handeleColse() {
        this.dialogExport = false;
        this.downType = 1;
        this.startNumber = "";
        this.endNumber = "";
        this.exportColumnList = [];
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: transparent !important;
        height: auto !important;
    }
    .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
    .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
        display: none;
    }

    .el-dialog__footer .dialog-footer {
        button + button {
            margin-left: 10px !important;
        }
    }
}

/deep/.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #de2728;
    color: white;
}

button {
    outline: none;
}

.retrieval-box {
    width: 100%;
    .content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .search-left {
            width: calc(60% - 5px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #fff;
            .search-group {
                display: flex;
                flex-wrap: wrap;
                padding: 10px 0 0 18px;
                .search-wrap {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    width: 50%;
                    max-width: 50%;
                    position: relative;
                    padding: 0 50px 0 0;
                    &:nth-child(n + 3) {
                        padding: 0 50px 0 30px;
                    }
                    &:hover {
                        .del-icon {
                            display: block;
                        }
                    }

                    .del-icon {
                        display: none;
                        position: absolute;
                        color: #fd7b7b;
                        right: 23px;
                        z-index: 10;
                        font-size: 21px;
                        cursor: pointer;
                    }

                    .search-item {
                        position: relative;
                        height: 36px;
                        width: 74%;
                        &.hasClass {
                            width: calc(100% - 60px);
                        }
                        @include flexLayout(flex, normal, center);
                        justify-content: space-between;
                        ::v-deep {
                            .input {
                                height: 100%;
                                margin-left: 4px;
                                input {
                                    height: 100%;
                                    font-size: 14px;
                                    padding-right: 20px;
                                    border: none;
                                    border-bottom: 1px solid #dcdfe6;
                                    border-radius: 4px 4px 0 0;
                                }
                            }
                            .el-select {
                                height: 36px;
                                width: 100%;
                            }
                        }
                    }
                    /deep/.el-date-editor {
                        height: 100%;
                        width: 100%;
                        .el-range-separator {
                            line-height: 24px;
                            width: 10%;
                        }
                        .el-range__icon {
                            line-height: 20px;
                        }
                        .el-range__close-icon {
                            line-height: 20px;
                        }
                    }
                    .icon-btn {
                        width: 18px;
                        height: 18px;
                        border-radius: 50%;
                        background-image: url("~@/assets/icon/radio.png");
                        background-size: cover;
                        cursor: pointer;
                        position: absolute;
                        left: 0;
                        &.active {
                            background-image: url("~@/assets/icon/radio-active.png") !important;
                        }
                    }
                    .keyword {
                        font-size: 14px;
                        color: #37383a;
                        margin-right: 8px;
                        width: 70px;
                        max-width: 70px;
                        @include textEllipsis();
                    }
                }
            }
            &-footer {
                display: flex;
                align-items: center;
                height: 50px;
                border-top: 1px solid #edeff2;
                .handle {
                    width: 50%;
                    padding: 0 30px 0 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    & > span {
                        cursor: pointer;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #2c82c9;
                    }
                }
                .save-list {
                    border-left: 1px solid #edeff2;
                    flex: 1;
                    display: flex;
                    padding-left: 20px;
                    p {
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #37383a;
                        width: 64px;
                    }
                    ul {
                        display: flex;
                        flex: 1;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 20px;
                        li {
                            display: flex;
                            cursor: pointer;
                            position: relative;
                            max-width: 120px;
                            & + li {
                                margin-left: 5px;
                            }
                            span {
                                display: inline-block;
                                width: 80px;
                                @include textEllipsis();
                                font-size: 14px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #37383a;
                            }
                            i {
                                display: none;
                                position: absolute;
                                right: 0;
                            }
                            &:hover {
                                background: rgba(255, 209, 209, 0.5);
                                i {
                                    display: block;
                                    color: #c53535;
                                    cursor: pointer;
                                }
                            }
                        }
                        /deep/.el-dropdown {
                            .el-dropdown-link {
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
            & > .el-button {
                margin-left: 12px;
            }
        }
        .search-right {
            background: #fff;
            width: calc(40% - 5px);
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            * {
                margin: 0;
            }
            & > div {
                display: flex;
                align-items: center;
                justify-content: space-between;
                p {
                    font-size: 14px;
                    color: #37383a;
                }
            }
            .echars-category {
                width: 100%;
                height: 180px;
            }
        }
    }
}

.container {
    margin-top: 10px;
    .content {
        background: #fff;
        padding: 10px;
        .download {
            margin-bottom: 10px;
            cursor: pointer;
            color: #2c82c9;
            font-weight: 500;
            display: inline-block;
            i {
                font-size: 18px;
            }
            span {
                font-size: 16px;
            }
        }
    }
}

.tree-dialog {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 20px;
        }
        .dialog-footer {
            .el-button {
                padding: 10px 60px;
                & + .el-button {
                    margin-left: 60px;
                }
            }
        }
    }
    .tree-box {
        height: 600px;
        display: flex;
        justify-content: space-around;
        & > div {
            &.tree-left {
                width: 20%;
                border: 1px solid #edeff2;
                height: 100%;
                overflow-y: scroll;
            }
            &.tree-center {
                width: 35%;
                .el-tree {
                    padding: 10px 12px;
                    height: 266px;
                    max-height: 266px;
                    overflow-y: scroll;
                    margin-top: 12px;
                    border: 1px solid #edeff2;
                }
                .tree-center-bottom {
                    p {
                        margin-top: 12px;
                    }
                }
            }
            &.tree-right {
                width: 35%;
                .el-checkbox-group {
                    padding: 10px 12px;
                    height: 266px;
                    max-height: 266px;
                    overflow-y: scroll;
                    margin-top: 12px;
                    border: 1px solid #edeff2;
                    display: flex;
                    flex-direction: column;
                }
                .tree-right-bottom {
                    p {
                        margin-top: 12px;
                    }
                }
            }
        }
    }
}

.annex-mask {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-dialog__body {
            padding: 10px 14px;
            p {
                margin: 0;
                line-height: 28px;
                color: #ccc;
            }

            & > div > div {
                display: flex;
                flex-direction: column;
                & > span {
                    margin-bottom: 10px;
                }
                & + div {
                    margin-top: 24px;
                }
            }

            .el-checkbox-group {
                .el-checkbox {
                    margin-right: 30px !important;
                }
            }
        }
    }
}
.export-dialog {
    * {
        margin: 0;
    }
    ::v-deep {
        .item-fotm {
            margin-bottom: 10px;
        }
        .el-form-item__label {
            padding-bottom: 0;
            line-height: 32px;
        }
        .el-form-item__content {
            line-height: 32px;
        }
        .serial-number {
            .group {
                display: flex;
                span {
                    margin: 0 10px;
                }
            }
        }
        .el-select {
            width: 100%;
        }
        .tips {
            font-size: 12px;
            color: #ccc;
        }
    }
}

.table-img {
    width: 120px;
    height: 80px;
    cursor: pointer;
    object-fit: contain;
}

.table-file {
    margin-right: 12px;
}

.address-text {
    @include textEllipsis();
}
</style>
